<template>
  <div class="goods" :class="themeClass" :style="{minHeight: windowHeight}">
    <div class="goods-swiper">
      <swiper
          :indicator-dots="indicatorDots"
          :indicatorColor="indicatorColor"
          :indicatorActiveColor="indicatorActiveColor"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
          :current="active"
          display-multiple-items="1"
          previous-margin="30px"
          next-margin="30px"
          @change="onChange"
      >
        <block v-for="(item, id) in goods.goodsImg" :key="id">
          <swiper-item>
            <image mode="aspectFill" :class="active === id ? 'goods-img-item' : 'goods-img'" :src="item"></image>
          </swiper-item>
        </block>
      </swiper>
    </div>
    <div class="box">
      <div class="title">{{ goods.goodsName }}</div>
      <div class="info color-text-secondary">{{ goods.goodsDetails}}</div>

      <div class="money color-text-secondary">
        {{ goods.goodsUnit }}
        <div class="right-txt color-text-regular">
          $ {{ goods.goodsPrice }}
        </div>
      </div>
    </div>

    <div class="btn" v-if="!isCartById">
      <van-button block round type="primary" @click="addCartData">Add Card</van-button>
    </div>
    <div v-else class="cart-btn container-background-color color-text-regular">
      <van-row>
        <van-col span="6">
          <div class="text" @click="subtractionData">
           -
          </div>
        </van-col>
        <van-col span="12">
          <div class="sum">
            {{ goods.goodsSum }}
          </div>
        </van-col>
        <van-col span="6">
          <div class="text" @click="additionData">
            +
          </div>
        </van-col>
      </van-row>
    </div>

    <van-popup
        :show="cartShow"
        position="bottom"
        :overlay="true"
        custom-class="xs-cart-popup"
        @close="onCloseCartShow"
    >
      <div class="popup-box">
        <div class="popup-confirm">
          Confirm
        </div>
        <div class="popup-info">
          <div class="list">
            <div class="list-title">Additionally</div>
            <div class="list-checkbox">
              <van-checkbox-group :value="goods.goodsAdditionally" @change="onCheckboxAdditionally">
                <van-checkbox
                    v-for="(item, index) in goods.goodsAdditionallyList"
                    :key="index"
                    :name="item"
                >
                  {{ item }}
                </van-checkbox>
              </van-checkbox-group>
            </div>
          </div>
          <div class="list">
            <div class="list-title">Sauce</div>
            <div class="list-checkbox">
              <van-checkbox-group :value="goods.goodsSauce" @change="onCheckboxSauce">
                <van-checkbox
                    v-for="(item, index) in goods.goodsSauceList"
                    :key="index"
                    :name="item"
                >
                  {{ item }}
                </van-checkbox>
              </van-checkbox-group>
            </div>
          </div>
        </div>
        <div class="popup-footer" @click="onCloseCartShow">
          Cancel
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  components: {},
  computed: {
    ...mapState('shop', {
      windowHeight: state => state.theme.windowHeight,
      cartList: state => state.cart.cartList
    }),
    ...mapGetters('shop', {
      activeSetting: 'theme/activeSetting'
    }),
    themeClass: function () {
      return `theme-` + this.activeSetting.name
    },
    isCartById: function (self) {
      let res = this.cartList.filter(s => { return s.goodsId === this.goods.goodsId })
      if (res && res.length > 0) {
        self.goods = res[0]
        return true
      } else {
        return false
      }
    }
  },
  data () {
    return {
      active: 2, // 轮播中间的位置
      cartShow: false,
      indicatorDots: true,
      autoplay: false,
      indicatorColor: 'rgba(109, 115, 210, .3)',
      indicatorActiveColor: 'rgba(109, 115, 210, 1)',
      interval: 5000,
      duration: 1000,
      goods: {
        goodsId: 1,
        goodsImg: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg'
        ],
        goodsName: 'goods',
        goodsDetails: 'Lorem ipsum dolor sit amet, consectute adipiscin eit, sed diam nonummy nibh euismod',
        goodsUnit: '456g / pieces',
        goodsPrice: 12.4,
        goodsSum: 0,
        goodsAdditionally: [],
        goodsSauce: [],
        goodsAdditionallyList: ['1', '3', '4'],
        goodsSauceList: ['1', '2', '3']
      }
    }
  },
  beforeCreate () {},
  created () {
    // 获取页面高度
    this.$store.dispatch('shop/theme/getSystemInfo')

    Megalo.authorize({
      scope: 'scope.userLocation'
    })

    wx.startWifi({
      success: function (res) {
        console.log(res)
        wx.getWifiList({
          success: function (a) {
            console.log(a)
          },
          fail: function (err) {
            console.log(err)
          }
        })
      }
    })
    wx.onGetWifiList(function (CALLBACK) {
      var a = CALLBACK.wifiList
      console.log(a)
      console.log(CALLBACK)
    })
  },
  beforeMount () {},
  mounted () {},
  onLoad (options) {},
  onReady () {},
  onShow () {},
  onHide () {},
  onUnload () {},
  /**
   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
   */
  methods: {
    ...mapActions('shop/cart', [
      'addCart'
    ]),
    ...mapMutations('shop/cart', [
      'addition',
      'subtraction'
    ]),
    addCartData () {
      this.addCart(this.goods)
    },
    additionData () {
      this.addition(this.goods.goodsId)
      this.setCartDetails()
    },
    subtractionData () {
      this.subtraction(this.goods.goodsId)
      this.setCartDetails()
    },
    setCartDetails () {
      let data = this.cartList.filter(s => { return s.goodsId === this.goods.goodsId })
      this.goods = data[0]
    },
    onChange ({ detail }) {
      this.active = detail.current
    },
    onCloseCartShow () {
      this.cartShow = false
    },
    onCheckboxAdditionally (event) {
      this.goods.goodsAdditionally = event.detail
    },
    onCheckboxSauce (event) {
      this.goods.goodsSauce = event.detail
    }
  }
}
</script>

<style lang="scss">
  .goods {
    swiper {
      height: 580rpx;
    }
    .goods-swiper {
      padding: 10px 0;
      .goods-img {
        display: block;
        width: 580rpx;
        height: 540rpx;
        margin: 0 auto;
        border-radius: 8px;
      }
      .goods-img-item {
        display: block;
        width: 580rpx;
        height: 580rpx;
        margin: 0 auto;
        border-radius: 8px;
      }
    }
    .box {
      margin: 30px;
      .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .info {
        margin-bottom: 15px;
      }
      .money {
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        .right-txt {
          float: right;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
    .btn {
      margin:  0 15px;
    }
    .cart-btn {
      margin: 15px;
      height: 44px;
      line-height: 44px;
      font-weight: bold;
      text-align: center;
      border-radius: 16px;
      .text {
        font-size: 16px;
      }
      .sum {
        font-size: 16px;
      }
    }
  }
</style>
